<template>
  <div class="avatar-demo">
    <h3 class="title">基本</h3>
    <d-avatar :src="src" @click="click">
      <div style="font-size: 18px;">默认尺寸的显示</div>
      <p class="dark2-color">描述</p>
    </d-avatar>
    <br>
    <d-avatar :src="src" :width="60" v-width="300" :imageTop="5">
      <div style="font-size: 20px;" class="text-ellipsis">
        超出部分省略，自定义尺寸的显示
      </div>
      <p class="dark2-color">描述1</p>
      <p class="dark2-color">描述2</p>
      <p class="dark2-color">描述3</p>
    </d-avatar>
    <h3 class="title">设置不同用法</h3>
    <d-row>
      <d-col :width="4" v-for="f of fits" :key="f">
        <p class="text-center">{{ f }}</p>
        <div class="text-center">
          <d-avatar :src="src" :width="100" :fit="f" noInfo></d-avatar>
        </div>
      </d-col>
    </d-row>
    <h3 class="title">设置默认类型与形状</h3>
    <h5 class="sub-title">当一些用户没有图像信息时，可以显示默认的图片</h5>
    <d-row>
      <d-col :width="12">
        <d-avatar type="male" noInfo></d-avatar>&nbsp;
        <d-avatar type="female" :src="src" noInfo></d-avatar>
      </d-col>
      <d-col :width="12">
        <d-avatar type="male" :src="src" shape="square" noInfo></d-avatar>&nbsp;
        <d-avatar type="female" shape="square" noInfo></d-avatar>
      </d-col>
    </d-row>
  </div>
</template>

<script>
export default {
  name: 'avatarDemo',
  data () {
    return {
      fits: ['fill', 'contain', 'cover', 'none'],
      src: 'https://i1.go2yd.com/image.php?url=0Kvq81cKR1'
    }
  },
  methods: {
    click (event) {
      console.log(event)
    }
  }
}
</script>

<style lang="stylus">
.avatar-demo
  .d-avatar-type-female .d-avatar-image
    background-image: url('../../static/images/avatar-female.png')
    background-color #00ddce
  .d-avatar-type-male .d-avatar-image
    background-image: url('../../static/images/avatar-male.png')
    background-color #ffa154
</style>
